﻿<html>

<head> 
	<meta charset="UTF-8">
	<title>Swiper视频+图片轮播demo</title>
	<link rel="stylesheet" href="./css/swiper.min.css">
</head>
<style>
	body {
		text-align: center;
	}

	#content {
		width: 600px;
		height: 250px;
		margin: auto;
		border: 1px solid #ddd;
	}

	/*轮播图片样式*/
	.swiper-slide img,
	video {
		width: 100%;
		height: 100%;
	}
</style>

<body>
	<h2>Swiper视频+图片轮播demo</h2>
	<div id="content">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<!--图片1-->
				<div class="swiper-slide">
					<img  src="./b1.png" alt="" />
				</div>        
				<!--视频-->   
				<div class="swiper-slide">
					<video controls="controls" src="./movie.mp4" poster=""   preload="auto">
						<source src="./movie.mp4" type="video/mp4">
					</video>
				</div>
				<!--图片2-->
				<div class="swiper-slide">
					<img  src="./b2.png" alt="" />
				</div>
			</div>
			           
			<!--左右点击图标，可不要-->
			<div class="swiper-button-next">
			</div> 
			<div class="swiper-button-prev">
			</div>
		</div>
		   
	</div>
</body>
<script src="./jquery1.42.min.js"></script>

<script src="js/swiper.min.js"></script>

<script>
	//只做简单设置，具体的自动播放设置和视频播放监控等可网上查具体代码
	var swiper = new Swiper('.swiper-container', {
		slidesPerView: 1,
		spaceBetween: 0,
		loop: true,
		pagination: {
			el: '.swiper-pagination',
			clickable: true
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev'
		}
	}
	);
</script>

</html>